<template>
  <a-form-item
    class="form-item"
    :labelCol="field.fieldProps?.labelCol ?? formLayout.labelCol"
    :wrapperCol="field.fieldProps?.wrapperCol ?? formLayout.wrapperCol"
    :rules="field.rules ?? []"
    :name="field.formKey"
    :label="field.label"
  >
    <RenderField
      v-if="store.wrapFormFieldToken"
      v-bind="field.fieldProps"
      disabled
      :field="field"
      v-model:value="modelValue"
    />
    <span v-else>{{ field.formKey }} </span>
  </a-form-item>
</template>

<script setup>
import { computed } from "vue";
import RenderField from "@/components/RenderField/Antd.vue";
import { useFormStore } from "@/store/form";
const store = useFormStore();

const props = defineProps({
  formData: { type: Object, default: () => ({}) },
  formLayout: { type: Object, default: () => ({}) },
  field: { type: Object, default: () => ({}) },
  value: { type: [String, Boolean, Object, Array], default: "" },
});

const emits = defineEmits(["update:value"]);

const modelValue = computed({
  get() {
    return props.value;
  },
  set(val) {
    emits("update:value", val);
  },
});
</script>

<style lang="less" scoped>
.form-item {
  margin-bottom: 40px;
}
</style>
